<!-- 地市项目发电装机容量 -->
 <template>
   <div class="content">
    <el-card class="box-card">
      <div slot="header">
        <span style="color: rgb(14, 175, 14);">地市项目发电装机容量</span>
      </div>
      <div id="Chart" style="width: 100%;height:275px"></div>
    </el-card>
   </div>
 </template>
 
 <script>
 import * as echarts from "echarts";
 export default {
  data() {
    return {
      chart: undefined,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('Chart')
      this.chart = echarts.init(ctx)
      let option = {
        backgroundColor: '#fff',
        tooltip: {
          // trigger: 'axis',
          backgroundColor: '#fff',
          extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
          padding: [12, 16, 12, 16],
          textStyle: {
            color: 'rgba(0,0,0,0.65)'
          },
          position: (point) => {
            return ['10', point[1]]
          },
          formatter: (param) => {
            let {marker, name, value, data} = param
            let result = `<div>${marker}${name}</div>`
            result += `<div>容量：1.8GW</div>`
            result += `<div>项目名称：2024-2030年锡林郭勒盟防沙治沙和风电光伏一体化工程</div>`
            return result
          }
        },
        grid: {
          left: '5%',
          right: '6%',
          bottom: '0%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['锡林郭勒', '兴安盟', '通辽市', '赤峰市', '乌兰察布市', '鄂尔多斯市', '巴彦淖尔市', '阿拉善盟'],
          axisLabel: {
            rotate: 45,
            textStyle: {
              color: '#9eaaba'
            }
          },
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          axisTick: {       //y轴刻度线
            show: false
          },
          splitLine: {    //网格
            show: false,

          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {        //坐标轴字体颜色
            textStyle: {
              color: '#9eaaba'
            }
          },
          axisLine: {
            show: false,
          },
          axisTick: {       //y轴刻度线
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#dadde4',
              type: "dashed"
            }
          }
        },
        series: [{
          name: '数据1',
          type: 'bar',
          stack: '策略变更',
          barWidth: '40%',  //柱子宽度
          itemStyle: {  //柱子颜色
            normal: {
              color: 'green',
              // borderColor: "#fff",
              // borderWidth: 1,
            }
          },
          data: [232, 193, 240, 214, 239, 223, 202, 223]
        }, {
          name: '数据2',
          type: 'bar',
          stack: '策略变更',
          barWidth: '40%',  //柱子宽度
          itemStyle: {  //柱子颜色
            normal: {
              color: '#9bd08c',
              // borderColor: "#fff",
              // borderWidth: 1,
            }
          },
          data: [320, 332, 301, 334, 390, 330, 320, 334]
        }, {
          name: '数据3',
          type: 'bar',
          stack: '策略变更',
          barWidth: '40%',  //柱子宽度
          itemStyle: {  //柱子颜色
            normal: {
              color: 'lightGreen',
              // borderColor: "#fff",
              // borderWidth: 1,
            }
          },
          data: [60, 82, 51, 94, 100, 68, 74, 100]
        }]
      };
      this.chart.setOption(option)
    }
  }
 }
 </script>
 
 <style lang="scss" scoped>
  .content {
    margin-left: 20px;
    .box-card {
      width: 100%;
      margin: 20px;
    }
 }
 </style>